.wobbling-1 {
    width: 30px;
    height: 30px;
    display: grid;
    transform: translateY(100%);
}

.wobbling-1::before,
.wobbling-1::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    transform-origin: bottom;
    position: relative;
}

.wobbling-1::before {
    background: radial-gradient(at 30% 30%, #0000, #000a) red;
    transform: scaleY(0.65);
    top: 0;
    animation: w1-1, w1-2;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0, 400, 1, 400), ease;
    animation-iteration-count: infinite;
}

.wobbling-1::after {
    background: #ccc;
    filter: blur(8px);
    transform: scaleY(0.3) translate(0px, 0px);
    left: 0;
    animation: w1-3 2s cubic-bezier(0, 400, 1, 400) infinite;
}

@keyframes w1-1 {
    100% {
        top: -0.2px
    }
}

@keyframes w1-2 {

    4%,
    96% {
        transform: scaleY(1)
    }
}

@keyframes w1-3 {
    100% {
        transform: scaleY(0.3) translate(0.1px, -0.1px)
    }
}

.wobbling-2 {
    width: 100px;
    height: 60px;
    display: flex;
    animation: w2-0 2s infinite linear;
}

.wobbling-2::before,
.wobbling-2::after {
    content: "";
    flex: 4;
    background:
        radial-gradient(at 50% 20%, #0000, #000a) bottom left/20px 20px repeat-x,
        linear-gradient(red 0 0) bottom/100% 20px no-repeat #ddd;
    -webkit-mask:
        repeating-linear-gradient(90deg, #000 0 4px, #0000 0 20px) 8px 0,
        radial-gradient(farthest-side, #000 90%, #0000) left bottom/20px 20px repeat-x;
}

.wobbling-2::after {
    flex: 1;
    transform-origin: top;
    animation: w2-1 1s cubic-bezier(0, 20, 1, 20) infinite;
}

@keyframes w2-0 {

    0%,
    49.9% {
        transform: scaleX(1)
    }

    50%,
    100% {
        transform: scaleX(-1)
    }
}

@keyframes w2-1 {
    100% {
        transform: rotate(-2deg)
    }
}

.wobbling-3 {
    width: 20px;
    height: 20px;
    animation: w3-0 2s linear infinite;
}

.wobbling-3::before,
.wobbling-3::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(at 30% 30%, #0000, #000a) red;
    animation: w3-1 0.5s cubic-bezier(.5, -500, .5, 500) infinite;
}

.wobbling-3::after {
    animation-delay: -0.15s;
}

@keyframes w3-0 {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes w3-1 {
    100% {
        transform: translate(0.5px)
    }
}


.wobbling-4 {
    width: 80px;
    height: 80px;
    background:
        radial-gradient(farthest-side at top, #0000 calc(100% - 21px), lightblue calc(100% - 20px) 99%, #0000) bottom/100% 50%,
        radial-gradient(farthest-side, lightblue 94%, #0000) left /20px 20px,
        radial-gradient(farthest-side, lightblue 94%, #0000) right/20px 20px;
    background-repeat: no-repeat;
    position: relative;
}

.wobbling-4::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    inset: auto 0 0;
    margin: auto;
    border-radius: 50%;
    background: orange;
    transform-origin: 50% -20px;
    animation: w4 1s infinite cubic-bezier(0.5, 623, 0.5, -623);
}

@keyframes w4 {
    100% {
        transform: rotate(0.5deg)
    }
}


.wobbling-5 {
    height: 80px;
    width: 20px;
    color: #514b82;
    background:
        radial-gradient(farthest-side, currentColor 94%, #0000) top/8px 8px,
        linear-gradient(currentColor 0 0) top/4px 70%,
        conic-gradient(from -30deg at bottom, #0000, currentColor 2deg 58deg, #0000 60deg) bottom /100% 20px,
        conic-gradient(from 150deg at top, #0000, currentColor 2deg 58deg, #0000 60deg) bottom 20px left 0/100% 20px;
    background-repeat: no-repeat;
    transform-origin: 50% 4px;
    animation: w5 2s infinite cubic-bezier(0.5, 300, 0.5, -300);
}

@keyframes w5 {
    100% {
        transform: rotate(0.5deg)
    }
}

.wobbling-6 {
    width: 80px;
    height: 50px;
    background:
        radial-gradient(farthest-side, #0000 calc(100% - 15px), #ccc calc(100% - 14px) 99%, #0000) center/50px 100%,
        linear-gradient(#ccc 0 0) bottom/100% 14px;
    background-repeat: no-repeat;
    position: relative;
    animation: w6-0 2s -0.5s infinite linear;
}

.wobbling-6:before {
    content: "";
    position: absolute;
    inset: auto auto 2px 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f03355;
    transform-origin: 50% -14px;
    animation: w6-1 .5s infinite linear alternate;
}

@keyframes w6-0 {

    0%,
    49.99% {
        transform: scaleX(1)
    }

    50%,
    100% {
        transform: scaleX(-1)
    }
}

@keyframes w6-1 {
    0% {
        transform: translate(0) rotate(0)
    }

    50% {
        transform: translate(34px) rotate(0)
    }

    100% {
        transform: translate(34px) rotate(-180deg)
    }
}

.wobbling-7 {
    height: 20px;
    width: 80px;
    transform: rotate(-30deg);
    background:
        radial-gradient(farthest-side, #f03355 90%, #0000) left bottom/15px 15px no-repeat #ddd;
    animation:
        w7-0 2s infinite alternate linear,
        w7-1 2s infinite cubic-bezier(.75, 0, 1, .6);
}

@keyframes w7-0 {
    50% {
        transform: rotate(30deg)
    }
}

@keyframes w7-1 {
    50% {
        background-position: right bottom
    }
}

.wobbling-8 {
    height: 40px;
    width: calc(20px*4);
    color: #25b09b;
    background:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-size: calc(100%/4 + 1px) 50%;
    background-repeat: no-repeat;
    animation: w8 1s infinite cubic-bezier(0.5, 150, 0.5, -150);
}

@keyframes w8 {
    0% {
        background-position: calc(0*100%/3) 50%, calc(1*100%/3) 50%, calc(2*100%/3) 50%, calc(3*100%/3) 50%
    }

    100% {
        background-position: calc(0*100%/3) 51%, calc(1*100%/3) 50.5%, calc(2*100%/3) 49.5%, calc(3*100%/3) 49%
    }
}


.wobbling-9 {
    height: 30px;
    width: calc(15px*6);
    color: #514b82;
    background:
        linear-gradient(currentColor 0 0) calc(0*100%/5) 50%,
        linear-gradient(currentColor 0 0) calc(1*100%/5) 50%,
        linear-gradient(currentColor 0 0) calc(2*100%/5) 50%,
        linear-gradient(currentColor 0 0) calc(3*100%/5) 50%,
        linear-gradient(currentColor 0 0) calc(4*100%/5) 50%,
        linear-gradient(currentColor 0 0) calc(5*100%/5) 50%;
    background-size: calc(100%/6 + 1px) 50%;
    background-repeat: no-repeat;
    animation: w9 1s infinite cubic-bezier(0.5, 170, 0.5, -170);
}

@keyframes w9 {
    14.28% {
        background-position: calc(0*100%/5) 51%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%
    }

    28.57% {
        background-position: calc(0*100%/5) 50%, calc(1*100%/5) 51%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%
    }

    42.85% {
        background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 51%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 50%
    }

    57.14% {
        background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 51%, calc(4*100%/5) 50%, calc(5*100%/5) 50%
    }

    71.42% {
        background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 51%, calc(5*100%/5) 50%
    }

    85.71% {
        background-position: calc(0*100%/5) 50%, calc(1*100%/5) 50%, calc(2*100%/5) 50%, calc(3*100%/5) 50%, calc(4*100%/5) 50%, calc(5*100%/5) 51%
    }
}

.wobbling-10 {
    height: 60px;
    width: 60px;
    position: relative;
}

.wobbling-10::before,
.wobbling-10::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-origin: bottom;
}

.wobbling-10::after {
    background:
        radial-gradient(at 75% 15%, #fffb, #0000 35%),
        radial-gradient(at 80% 40%, #0000, #0008),
        radial-gradient(circle 5px, #fff 94%, #0000),
        radial-gradient(circle 10px, #000 94%, #0000),
        linear-gradient(#F93318 0 0) top /100% calc(50% - 5px),
        linear-gradient(#fff 0 0) bottom/100% calc(50% - 5px) #000;
    background-repeat: no-repeat;
    animation: w10 1s infinite cubic-bezier(0.5, 120, 0.5, -120);
}

.wobbling-10::before {
    background: #ddd;
    filter: blur(8px);
    transform: scaleY(0.4) translate(-13px, 0px);
}

@keyframes w10 {

    30%,
    70% {
        transform: rotate(0deg)
    }

    49.99% {
        transform: rotate(0.2deg)
    }

    50% {
        transform: rotate(-0.2deg)
    }
}